<template>
    <div class="home-box" ref="homeScroll">
        <div>
            <SwiperItem :loops="loops"></SwiperItem>
            <TypeList :items="mainTypes" :rowNum="5"></TypeList>
            <RecommendItem :items="benefits">
                <ItemLine :name="'超实惠直达'" slot="title"></ItemLine>
            </RecommendItem>
            <TypeList :items="hotTypes" :rowNum="4">
                <ItemLine :name="'热门分类'" slot="title"></ItemLine>
            </TypeList>
            <ProductList :items="likes">
                <ItemLine :name="'猜你喜欢'" slot="title"></ItemLine>
            </ProductList>
        </div>
    </div>
</template>
<script>
// mapActions 和 mapMutations 一样
import { mapState, mapActions } from "vuex";
import BScroll from "better-scroll";
import ItemLine from "../components/ItemLine";
import SwiperItem from "../components/SwiperItem";
import TypeList from "../components/TypeList";
import RecommendItem from "../components/RecommendItem";
import ProductList from "../components/ProductList";
export default {
    components: {
        ItemLine,
        SwiperItem,
        TypeList,
        RecommendItem,
        ProductList
    },
    computed: {
        // vuex 分模块 加载 数据，模块名称为 构建模块的命名空间名称
        ...mapState("home", [
            "loops",
            "benefits",
            "mainTypes",
            "hotTypes",
            "likes"
        ])
    },
    methods: {
        // vuex 分模块 加载 数据，模块名称为 构建模块的命名空间名称
        ...mapActions("home", ["loadHomeDatas", "loadHomeLikes"]),
        initScroll() {
            if (this.$sc) {
                this.$sc.refresh();
            } else {
                // 因为BS本身问题，直接在mounted构建无法读取DOM元素
                // 建议在 构建对象时 使用 40ms 延迟
                setTimeout(() => {
                    this.$sc = new BScroll(this.$refs.homeScroll, {
                        click: true
                    });
                }, 40);
            }
        }
    },
    activated(){
        // keep-alive 当前组件从缓存激活时执行的方法
        this.initScroll(); // 解决vue组件缓存导致的better-scroll 失效问题
    },
    mounted() {
        console.log(1);
        this.initScroll();
        this.loadHomeDatas();
        this.loadHomeLikes();
    }
};
</script>
<style lang="less" scoped>
.home-box {
    position: absolute;
    top: @h;
    bottom: @h;
    width: 100%;
    overflow: hidden;
}
</style>
